<script setup>
import { ref } from "vue";

// 按照列表渲染
const originList = ref([1, 2, 3, 4]);

const handleDragStart = (event, index) => {
  event.dataTransfer.setData("text/plain", index);
};
const handleDragOver = (event) => {
  event.preventDefault();
};
const handleDrop = (event, targetIndex) => {
  event.preventDefault();
  const originIndex = parseInt(event.dataTransfer.getData("text/plain"));
  // drop 时改变顺序
  const item = originList.value.splice(originIndex, 1)[0];
  originList.value.splice(targetIndex, 0, item);
};
</script>
<template>
  <div
    class="block"
    draggable="true"
    v-for="(item, key) in originList"
    :key="key"
    @dragstart="handleDragStart($event, key)"
    @dragover="handleDragOver"
    @drop="handleDrop($event, key)"
  >
    {{ item }}
  </div>
</template>

<style scoped>
.block {
  height: 50px;
  line-height: 50px;
  background-color: gray;
  color: white;
  margin-bottom: 1em;
}
</style>